import React, { useEffect, useState } from 'react';
import { Col, Form, Radio, Space } from 'antd';
import MyIcon from '../MyIcon';
import tagSelectCls from './styles.less';

interface ITagSelectNew {
  formName: string;
  formLabel: string;
  defalultKeys?: number | string;
  radioList: Record<string, any>[]; // {value: "", name: ""}
  radioDisabled?: boolean;
  onChange?: (e: any) => void;
  formRequired?: boolean;
  colSpan?: number;
}

export const TagSelectNew: React.FC<ITagSelectNew> = ({
  formName,
  formLabel,
  radioList,
  defalultKeys = 0,
  radioDisabled = false,
  onChange,
  formRequired = false,
  colSpan = 24,
}) => {
  /** 暂时弃用 */
  const [selectKeys, setSelectKeys] = useState<string | number | null>(defalultKeys || defalultKeys === 0 ? defalultKeys : null);

  useEffect(() => {
    if (defalultKeys || defalultKeys === 0) {
      setSelectKeys(String(defalultKeys));
    }
  }, [defalultKeys]);

  // const [selectKeys, setSelectKeys] = useState<number | string | undefined>(undefined);

  // useEffect(() => {
  //   setSelectKeys(defalultKeys);
  // }, [defalultKeys]);

  const onChangeSwitch = (e: any) => {
    const checkKey: string = e?.target?.value;
    setSelectKeys(checkKey);
    if (onChange) {
      onChange(checkKey);
    }
  };

  return (
    <Col span={colSpan}>
      <Form.Item
        className={tagSelectCls['TagSelectNew_formitem']}
        name={formName}
        label={formLabel}
        rules={[
          {
            required: formRequired,
            message: `请选择${formLabel}`,
          },
        ]}
        initialValue={selectKeys}
      >
        <Radio.Group style={{ whiteSpace: 'nowrap' }} onChange={onChangeSwitch} disabled={radioDisabled} className={tagSelectCls['TagSelectNewCls']}>
          <Space wrap size={[0, 8]}>
            {radioList?.map((item: any) => {
              return (
                <Radio.Button
                  key={item.value}
                  value={item.value}
                  style={{
                    marginRight: '10px',
                    position: 'relative',
                  }}
                  // disabled={item?.disabled ? item?.disabled : false}
                  checked={selectKeys == item?.value ? true : false}
                >
                  {item?.name}
                  {selectKeys == item.value ? (
                    <MyIcon
                      type="icon-xuanzejiaobiao"
                      style={{
                        fontSize: '30px',
                        position: 'absolute',
                        top: '1px',
                        right: '-1px',
                      }}
                    />
                  ) : null}
                </Radio.Button>
              );
            })}
          </Space>
        </Radio.Group>
      </Form.Item>
    </Col>
  );
};
